<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片裁剪工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            width: 100%;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            padding: 25px;
            margin-top: 20px;
        }
        
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .upload-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px;
            border: 2px dashed #3498db;
            border-radius: 8px;
            margin-bottom: 25px;
            transition: all 0.3s;
        }
        
        .upload-section:hover {
            background-color: rgba(52, 152, 219, 0.05);
        }
        
        .upload-section p {
            margin-bottom: 15px;
            color: #7f8c8d;
            font-size: 16px;
        }
        
        .file-input {
            display: none;
        }
        
        .upload-btn {
            background: #3498db;
            color: white;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.3s;
            border: none;
            font-size: 16px;
        }
        
        .upload-btn:hover {
            background: #2980b9;
        }
        
        .editor-section {
            display: none;
            flex-direction: column;
            align-items: center;
        }
        
        .canvas-container {
            position: relative;
            margin-bottom: 20px;
            overflow: hidden;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #f8f9fa;
        }
        
        #imageCanvas {
            display: block;
            max-width: 100%;
        }
        
        .crop-area {
            position: absolute;
            border: 2px dashed rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
            cursor: move;
        }
        
        .control-handle {
            position: absolute;
            width: 12px;
            height: 12px;
            background: #3498db;
            border: 2px solid white;
            border-radius: 50%;
        }
        
        .handle-tl { top: -6px; left: -6px; cursor: nwse-resize; }
        .handle-tr { top: -6px; right: -6px; cursor: nesw-resize; }
        .handle-bl { bottom: -6px; left: -6px; cursor: nesw-resize; }
        .handle-br { bottom: -6px; right: -6px; cursor: nwse-resize; }
        
        .controls {
            display: flex;
            gap: 15px;
            margin: 20px 0;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .control-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .crop-btn {
            background: #2ecc71;
            color: white;
        }
        
        .crop-btn:hover {
            background: #27ae60;
        }
        
        .reset-btn {
            background: #e74c3c;
            color: white;
        }
        
        .reset-btn:hover {
            background: #c0392b;
        }
        
        .download-btn {
            background: #3498db;
            color: white;
        }
        
        .download-btn:hover {
            background: #2980b9;
        }
        
        .preview-section {
            display: none;
            flex-direction: column;
            align-items: center;
            margin-top: 25px;
            padding-top: 25px;
            border-top: 1px solid #eee;
        }
        
        .preview-title {
            margin-bottom: 15px;
            color: #2c3e50;
        }
        
        #preview {
            max-width: 300px;
            max-height: 300px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        
        .instruction {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 6px;
            font-size: 14px;
            color: #7f8c8d;
        }
        
        .instruction h3 {
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .instruction ul {
            padding-left: 20px;
        }
        
        .instruction li {
            margin-bottom: 8px;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            .controls {
                flex-direction: column;
                align-items: center;
            }
            
            .control-btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1000px; margin-bottom: 20px;">
        <h1>图片裁剪工具</h1>
        <button onclick="window.location.href='index.html'" style="background: #6c757d; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; transition: background 0.3s;">
            返回首页
        </button>
    </div>
    
    <div class="container">
        <div class="upload-section" id="uploadSection">
            <p>选择要裁剪的图片</p>
            <input type="file" id="fileInput" class="file-input" accept="image/*">
            <button class="upload-btn" id="uploadBtn">选择图片</button>
        </div>
        
        <div class="editor-section" id="editorSection">
            <div class="canvas-container" id="canvasContainer">
                <canvas id="imageCanvas"></canvas>
                <div class="crop-area" id="cropArea">
                    <div class="control-handle handle-tl"></div>
                    <div class="control-handle handle-tr"></div>
                    <div class="control-handle handle-bl"></div>
                    <div class="control-handle handle-br"></div>
                </div>
            </div>
            
            <div class="controls">
                <button class="control-btn crop-btn" id="cropBtn">裁剪图片</button>
                <button class="control-btn reset-btn" id="resetBtn">重置</button>
                <button class="control-btn download-btn" id="downloadBtn">保存图片</button>
            </div>
        </div>
        
        <div class="preview-section" id="previewSection">
            <h3 class="preview-title">裁剪预览</h3>
            <img id="preview" alt="裁剪预览">
        </div>
        
        <div class="instruction">
            <h3>使用说明</h3>
            <ul>
                <li>点击"选择图片"按钮上传图片</li>
                <li>拖动裁剪框的四个角调整裁剪区域</li>
                <li>拖动裁剪框内部移动裁剪区域</li>
                <li>点击"裁剪图片"进行裁剪</li>
                <li>点击"保存图片"下载裁剪后的图片</li>
                <li>支持鼠标拖拽和触摸屏操作</li>
            </ul>
        </div>
        
        <div class="info-panel" style="margin-top: 20px; padding: 15px; background: #e8f4f8; border-radius: 6px; font-size: 14px; color: #2c3e50;">
            <h4>当前裁剪信息</h4>
            <p>位置: (<span id="currentX">0</span>, <span id="currentY">0</span>)</p>
            <p>尺寸: <span id="currentWidth">0</span> × <span id="currentHeight">0</span> 像素</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const fileInput = document.getElementById('fileInput');
            const uploadBtn = document.getElementById('uploadBtn');
            const uploadSection = document.getElementById('uploadSection');
            const editorSection = document.getElementById('editorSection');
            const previewSection = document.getElementById('previewSection');
            const canvas = document.getElementById('imageCanvas');
            const ctx = canvas.getContext('2d');
            const cropArea = document.getElementById('cropArea');
            const cropBtn = document.getElementById('cropBtn');
            const resetBtn = document.getElementById('resetBtn');
            const downloadBtn = document.getElementById('downloadBtn');
            const previewImg = document.getElementById('preview');
            const canvasContainer = document.getElementById('canvasContainer');
            
            // 变量初始化
            let image = null;
            let cropX = 50;
            let cropY = 50;
            let cropWidth = 200;
            let cropHeight = 200;
            let isDragging = false;
            let dragTarget = null;
            let startX, startY;
            
            // 绑定上传按钮事件
            uploadBtn.addEventListener('click', () => fileInput.click());
            
            // 文件选择事件
            fileInput.addEventListener('change', handleImageUpload);
            
            // 裁剪按钮事件
            cropBtn.addEventListener('click', cropImage);
            
            // 重置按钮事件
            resetBtn.addEventListener('click', resetEditor);
            
            // 下载按钮事件
            downloadBtn.addEventListener('click', downloadImage);
            
            // 处理图片上传
            function handleImageUpload(e) {
                const file = e.target.files[0];
                if (!file) return;
                
                const reader = new FileReader();
                reader.onload = function(event) {
                    image = new Image();
                    image.onload = function() {
                        // 显示编辑器
                        uploadSection.style.display = 'none';
                        editorSection.style.display = 'flex';
                        
                        // 设置画布尺寸
                        const maxWidth = Math.min(image.width, 800);
                        const scale = maxWidth / image.width;
                        canvas.width = maxWidth;
                        canvas.height = image.height * scale;
                        
                        // 绘制图片到画布
                        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
                        
                        // 初始化裁剪区域
                        initCropArea();
                    };
                    image.src = event.target.result;
                };
                reader.readAsDataURL(file);
            }
            
            // 初始化裁剪区域
            function initCropArea() {
                // 设置初始裁剪区域（图片中央区域）
                cropWidth = Math.min(canvas.width, canvas.height) * 0.6;
                cropHeight = cropWidth;
                cropX = (canvas.width - cropWidth) / 2;
                cropY = (canvas.height - cropHeight) / 2;
                
                updateCropArea();
                
                // 添加事件监听器
                addCropAreaListeners();
            }
            
            // 更新裁剪区域位置和尺寸
            function updateCropArea() {
                cropArea.style.width = `${cropWidth}px`;
                cropArea.style.height = `${cropHeight}px`;
                cropArea.style.left = `${cropX}px`;
                cropArea.style.top = `${cropY}px`;
                
                // 更新信息面板
                updateInfoPanel();
            }
            
            // 更新信息面板
            function updateInfoPanel() {
                document.getElementById('currentX').textContent = Math.round(cropX);
                document.getElementById('currentY').textContent = Math.round(cropY);
                document.getElementById('currentWidth').textContent = Math.round(cropWidth);
                document.getElementById('currentHeight').textContent = Math.round(cropHeight);
            }
            
            // 添加裁剪区域交互事件
            function addCropAreaListeners() {
                // 手柄拖动事件
                const handles = document.querySelectorAll('.control-handle');
                handles.forEach(handle => {
                    handle.addEventListener('mousedown', startDrag);
                    handle.addEventListener('touchstart', startDrag);
                });
                
                // 裁剪区域移动事件
                cropArea.addEventListener('mousedown', startMove);
                cropArea.addEventListener('touchstart', startMove);
                
                // 全局鼠标/触摸事件
                document.addEventListener('mousemove', doDrag);
                document.addEventListener('touchmove', doDrag);
                document.addEventListener('mouseup', stopDrag);
                document.addEventListener('touchend', stopDrag);
            }
            
            // 开始拖动
            function startDrag(e) {
                e.preventDefault();
                isDragging = true;
                dragTarget = e.target;
                startX = e.clientX || e.touches[0].clientX;
                startY = e.clientY || e.touches[0].clientY;
            }
            
            // 开始移动
            function startMove(e) {
                if (e.target === cropArea) {
                    e.preventDefault();
                    isDragging = true;
                    dragTarget = cropArea;
                    startX = e.clientX || e.touches[0].clientX;
                    startY = e.clientY || e.touches[0].clientY;
                }
            }
            
            // 执行拖动
            function doDrag(e) {
                if (!isDragging) return;
                
                e.preventDefault();
                const currentX = e.clientX || e.touches[0].clientX;
                const currentY = e.clientY || e.touches[0].clientY;
                const dx = currentX - startX;
                const dy = currentY - startY;
                
                if (dragTarget === cropArea) {
                    // 移动整个裁剪区域
                    cropX = Math.max(0, Math.min(canvas.width - cropWidth, cropX + dx));
                    cropY = Math.max(0, Math.min(canvas.height - cropHeight, cropY + dy));
                } else {
                    // 调整裁剪区域大小
                    const aspectRatio = cropWidth / cropHeight;
                    
                    if (dragTarget.classList.contains('handle-tl')) {
                        cropWidth = Math.max(50, cropWidth - dx);
                        cropHeight = cropWidth / aspectRatio;
                        cropX = Math.max(0, cropX + dx);
                        cropY = Math.max(0, cropY + dy * aspectRatio);
                    } else if (dragTarget.classList.contains('handle-tr')) {
                        cropWidth = Math.max(50, cropWidth + dx);
                        cropHeight = cropWidth / aspectRatio;
                        cropY = Math.max(0, cropY + dy * aspectRatio);
                    } else if (dragTarget.classList.contains('handle-bl')) {
                        cropWidth = Math.max(50, cropWidth - dx);
                        cropHeight = cropWidth / aspectRatio;
                        cropX = Math.max(0, cropX + dx);
                    } else if (dragTarget.classList.contains('handle-br')) {
                        cropWidth = Math.max(50, cropWidth + dx);
                        cropHeight = cropWidth / aspectRatio;
                    }
                    
                    // 限制裁剪区域在画布内
                    if (cropX + cropWidth > canvas.width) {
                        cropWidth = canvas.width - cropX;
                    }
                    if (cropY + cropHeight > canvas.height) {
                        cropHeight = canvas.height - cropY;
                    }
                }
                
                updateCropArea();
                startX = currentX;
                startY = currentY;
            }
            
            // 停止拖动
            function stopDrag() {
                isDragging = false;
                dragTarget = null;
            }
            
            // 裁剪图片
            function cropImage() {
                // 创建临时canvas进行裁剪
                const tempCanvas = document.createElement('canvas');
                const tempCtx = tempCanvas.getContext('2d');
                
                tempCanvas.width = cropWidth;
                tempCanvas.height = cropHeight;
                
                // 绘制裁剪区域
                tempCtx.drawImage(
                    canvas,
                    cropX, cropY, cropWidth, cropHeight,
                    0, 0, cropWidth, cropHeight
                );
                
                // 显示预览
                previewImg.src = tempCanvas.toDataURL('image/png');
                previewSection.style.display = 'flex';
                
                // 滚动到预览区域
                previewSection.scrollIntoView({ behavior: 'smooth' });
            }
            
            // 重置编辑器
            function resetEditor() {
                // 重新绘制原始图片
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
                
                // 重置裁剪区域
                initCropArea();
                
                // 隐藏预览
                previewSection.style.display = 'none';
            }
            
            // 下载图片
            function downloadImage() {
                if (!previewImg.src) return;
                
                const link = document.createElement('a');
                link.download = 'cropped-image.png';
                link.href = previewImg.src;
                link.click();
            }
        });
    </script>
</body>
</html>